<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #item {
            color:red
        }
    </style>
</head>
<body>
<!--2. 创建视图-->
<div id="app">
    <!--{{getAge()}}-->
    <!--{{age}}-->
    学生姓名：{{student.name}}
    学生年龄：{{student.age}}
    学生性别：{{student.gender}}<br/>
    <!--v-html=data返回的属性名 可以解析html标签 类比 {{}}-->
    <!--v-text=data返回的属性名  类比 {{}}-->
    <div v-html="student.name"></div>
    <!--v-bind:id/class/style/name/onclick-->
    <div v-bind:id="id">vue is good</div>
    <!--{{hi()}}-->
    <!--onclick js 直接声明的方法-->
    <!--v-bind:onclick 绑定在vue中声明的方法-->
    <button v-bind:onclick="hi">自我介绍</button>
</div>

<!--1. 引入js-->
<script src="./js/vue.js"></script>
<script src="./axios.js"></script>
<script>
    const app = {
        data() { // model 数据
            return {
                message: "hello vue",
                age: 0,
                student: {
                    name: "<a>张三</a>",
                    gender: '男',
                    age: 22
                },
                id: "item"
            }
        },
        methods: {
            // 定义方法
            get: () => {
            }, // get() {},
            getAge() {
                axios.get("http://localhost:8080/getAge").then(res => {
                    console.log(res.data.data)
                    this.age = res.data.data
                    console.log(this.age)
                })
            },
            hi() {
                alert("我叫" + this.student.name + "，今年" + this.student.age +
                    ",性别" + this.student.gender)
            }

        }
    }
    // 3. 创建ViewModel
    const vm = Vue.createApp(app).mount("#app") // 将viewModel挂载到app视图
    console.log(vm.$data)  // 获取model里面所有数据  对象

    function hi() {
        console.log("js中声明的hi方法")
        vm.hi()
    }
</script>

</body>
</html>